<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>循环遍历结构</title>
	</head>
	<!--四步: 1.定义div 2.引入JS类库 3.实例化vue对象 4.取值操作 {{}} -->
	<body>
		<div id="app">
			
			<!-- 问题: 什么样的数据需要循环 1.数组 2.对象
				 语法: v-for 遍历展现的是标签
					   v-for="遍历后的元素  in 集合数据"
			-->
			<h1>遍历数组</h1>
			<p v-for="item in hobby">{{item}}</p>
			<p v-for="item in hobby" v-text="item"></p>
			
			<h1>遍历对象</h1>
			<!--如果直接遍历对象,则展现value的值 -->
			<div v-for="item in user">{{item}}</div>
			<!--遍历对象 arg1:value arg2:key arg3:index-->
			<div v-for="(value,key,index) in user">
				<p>{{value}}--{{key}}---{{index}}</p>
			</div>
			
			<hr>
			
			<h1>遍历集合</h1>
			<!--约定-->
			<div v-for="user in userList" :key="user.id">
				<p>ID编号：{{user.id}}</p>
				<p>名称：{{user.name}}</p>
			</div>
		
		
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
            const app = new Vue({
                el: '#app',
                data: {
                    hobby: ['齐天大圣', '孙悟空', '孙小圣'],
                    user: {
                        id: 666,
                        name: '威风糖糖'
                    },
                    userList: [
                        {id: 1, name: 'A'},
                        {id: 2, name: 'B'},
                        {id: 3, name: 'C'}
                    ]
                },
                methods: {
                    // addNum1() {
                    //     this.num++
                    // },
                    // login() {
                    //     alert("实现ajax数据提交")
                    // }
                }
            })
		</script>
	</body>
</html>